<template>
	<view class="loginpage">
		<headnav title='VIP登录' :showMenu='false'></headnav>
		<container>
			<view style="height: 100%;display: flex;flex-direction: column;align-items: center;">
				<image src="../../static/headPic.jpg" style="width: 200rpx;border-radius: 50%;height: 200rpx;"></image>
				<view style="width: 95%;" class="padding radius shadow-blur">
					<form>
						<view class="cu-form-group shadow" style="border-radius: 30rpx;">
							<view class="title">手机号码</view>
							<input placeholder="请输入手机号" name="input" v-model="phonenumber"></input>
							<view class="cu-capsule radius">
								<view class='cu-tag bg-blue'> +86 </view>
								<view class="cu-tag line-blue"> 中国大陆 </view>
							</view>
						</view>
						<view class="placeholder" v-show="!phonevali"></view>
						<view class="errtip" v-show="phonevali">{{phoneerrmsg}}</view>
						<!-- <view class="cu-form-group">
							<view class="title">密码</view>
							<input placeholder="请输入密码" name="input" :password="isPwd"></input>
							<view class="title" @tap='isPwd=!isPwd'>
								<text class="lg text-gray cuIcon-attentionfill"></text>
							</view>
						</view> -->
						<view class="cu-form-group shadow" style="border-radius: 30rpx;">
							<view class="title">验证码</view>
							<input placeholder="请输入验证码" name="input" v-model="valicode"></input>
							<button class='cu-btn bg-green shadow' @tap="sendvalinum" :disabled="validCD">{{msg}}</button>
						</view>
					</form>
					<view class="placeholder"></view>
					<button class="cu-btn  bg-gradual-green shadow block" style="width: 80%;margin: 0 auto;" @tap="toindex">
						登录</button>
				</view>
			</view>
		</container>
	</view>
</template>

<script>
	import {
		validNumber,
		login
	} from '../../common/api.js'
	import headnav from '@/components/headNav/headNav.vue'
	import container from '../../components/container/container.vue'
	export default {
		components: {
			headnav,
			container
		},
		data() {
			return {
				cd: 30,
				msg: '发送验证码',
				phonevali: false,
				phoneerrmsg: '请输入正确的手机号!',
				isPwd: true,
				phonenumber: undefined,
				validCD: false,
				valicode: undefined
			}
		},
		methods: {
			sendvalinum() {
				if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.exec(this.phonenumber)) {
					/*消除提示开始发送验证码*/
					validNumber(this.phonenumber)
					this.phonevali = false
					uni.showToast({
						title: '验证码已发出',
						duration: 2000
					})
					this.validCD = true
					this.msg = '30秒'
					this.mark = setInterval(() => {
						if (this.cd == 0) {
							this.cd = 30
							this.validCD = false
							this.msg = '发送验证码'
							clearInterval(this.mark)
						} else {
							--this.cd
							this.msg = this.cd + '秒'
						}
					}, 1000)
				} else {
					this.phonevali = true
				}
			},
			toindex() {
				if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.exec(this.phonenumber) && this.valicode) {
					login({
						phone: this.phonenumber,
						captcha: this.valicode
					}).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							uni.setStorageSync('token', 'yjr-token');
							uni.setStorageSync('userinfo', JSON.stringify({
								avatarUrl: res.data.profile.avatarUrl,
								nickname: res.data.profile.nickname,
								userId: res.data.profile.userId,
								cookie:res.data.cookie
							}))							
							uni.showToast({
								title: '登录成功',
								duration: 2000
							})
							uni.switchTab({
								url: '/pages/index/index',
							})
						} else if (res.data.code == 503) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '手机号未注册',
								duration: 2000,
								icon: 'none'
							})
						}
					})

				} else {
					uni.showToast({
						title: '请完善你的信息',
						duration: 2000,
						icon: 'none'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.loginpage {
		.errtip {
			font-size: 20rpx;
			color: red;
			height: 50rpx;
			line-height: 50rpx;
			text-indent: 28rpx;
		}

		.placeholder {
			height: 50rpx;
		}
	}
</style>
